<template>
	<view class="wraps">

		<scroll-view scroll-y="true" :style="scrollStyle" >
		<view class="tabs" >
			<view class="tab" :class="{active: active==index}" v-for="(i,index) in tabs" :key="index" @click="handleActive(index)">
				{{i.name}}
			</view>
		</view>

		</scroll-view>
		<scroll-view scroll-y="true"  scroll-with-animation :style="scrollStyle" @scroll="scroll" :scroll-top="scrollTop"  v-if="tabs[active].workFlow">
		<view class="contents"  >
			<view class="content" v-for="(item,ii) in tabs[active].workFlow" :key="ii">
				<view class="title header">{{item.serveName}}</view>
				<view class="cont" v-if="item.user" v-for="(u,ind) in item.user" :key="ind">
					<view class="content1 content">
						<view class="title">{{u.first}}</view>
						<view class="desc" v-if="u.last" v-for="(l,id) in u.last" :key="id">
							{{l}}
						</view>
					</view>
				</view>
				<view v-else>暂无数据</view>
				<!-- <view class="desc">selectOrderDetailByNumberselectOrderDetailByNumberselectOrderDetailByNumberselectOrderDetailByNumber</view>
				<view class="desc">selectOrderDetailByNumber</view>
				<view class="desc">selectOrderDetailByNumberselectOrderDetailByNumberselectOrderDetailByNumber</view> -->
			</view>
			
		</view>
		</scroll-view>
		<view v-else class="empty">暂无数据</view>
	</view>
</template>

<script>
	import { allType } from '@/apis/certificate/certification.js'
	export default {
		data() {
			return {
				active: 0,
				tabs: [],
				scrollH: 0,
				scrollHeight: 0,
				scrollTop: 0,
			}
		},
		onLoad() {
			this.init()
			this.scrollH=uni.getSystemInfoSync().windowHeight-uni.upx2px(132)
		},
		computed: {
			barStyle() {
				// 向下滑动
				let trans = 130 * this.barActIndex + 'rpx';
				// console.log(trans,this.barActIndex,'bar滚动距离是');
				return `transform:translateY(${trans});transition: all ease-in-out .3s;`;
			},
			// 可滚动高度
			scrollStyle(){
				// console.log(this.scrollH,'系统高度是');
				return `height:${this.scrollH+100}px;`
			},
		},
		methods: {
			scrollStyle(){
				// console.log(this.scrollH,'系统高度是');
				return `height:${this.scrollH+100}px;`
			},
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			handleActive(i) {
				this.scrollTop = -this.scrollHeight * i;
				this.active = i
			},
			init(){
				allType().then(r => {
					let arr = r.object
					try{
						arr = arr.map(m => {
							m.workFlow = JSON.parse(m.workFlow)
							if(m.workFlow){
								m.workFlow = m.workFlow.map(a => {
									if(a.users) {
										try{
											a.user = JSON.parse(a.users)
											if(a.user){
												a.user = a.user.map(u => {
													u.last = u.last.split('\n')
													return u
												})
											}
										}catch(e){
											//TODO handle the exception
											console.log('error2222-------',e)
										}
									}
									return a
								})
							}
							
							return m
						})
					}catch(e){
						console.log('error1111-------',e)
					}
					
					this.tabs = [...arr]
					console.log(arr,'arrrrrrrrr')
					// this.data = 
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.flex{
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	.wraps {
		display: flex;

		.tabs {
			width: 210rpx;
			.tab {
				height: 130rpx;
				line-height: 130rpx;
				background: #FAFAFB;
				font-size: 32rpx;
				color: #999999;
				width:250rpx;
				text-align: center;
				overflow:hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow:ellipsis;
				&.active {
					position: relative;
					color: #333333;
					background: #FFF;
					&::before{
						content:'';
						position: absolute;
						display: inline-block;
						left: 0;
						width: 8rpx;
						height: 72rpx;
						background: #3C8EFF;
						border-radius: 4rpx;
					}
				}
			}

		}

		.contentsw{
			flex: 1;
			display: flex;
		}
		.contents {
			width: 450rpx;
			// width: 90%;
			margin: 60rpx 30rpx!important;	
			box-sizing: border-box;
				.content {
					margin-bottom: 0rpx;
					padding: 18rpx 16rpx 20rpx 16rpx;
					background: #FFFFFF;
					
					border-radius: 20rpx;
					font-size: 28rpx;
					color: #666666;
					flex-wrap: wrap;
					word-break: break-all;
					&.content1{
						margin-bottom: 20rpx;
						box-shadow: 0px 0px 8rpx 0px #E1E1E8;
					}
					.desc{
						
					}
					.title {
						font-size: 32rpx;
						color: #333333;
						&.header{
							
							margin-bottom: 10rpx;
							
						}
					}
				}
		}
	}
	.empty{
		flex: 1;
		position: relative;
		top: 90rpx;
		left: 120rpx;
	}
</style>
